<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>二手交易网</title>
		<meta name="viewport" content="initial-scale=1, maximum-scale=1">
		<link rel="shortcut icon" href="/static/favicon.ico">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="/static/css/sm.min.css">
		<link rel="stylesheet" href="/static/css/sm-extend.min.css">

		<!--icon css-->
		<link rel="stylesheet" href="/static/css/icon-style.css">


			<!--重写css-->
		<style>
			.tc{
				width: 100%;
				height: 3.7rem;
				line-height: .8rem;
				color: gray;
			}
			.card-header:after {
				height: 0px;
			}

		</style>
	</head>

	<body>
	<!--头部-->
	<header class="bar bar-nav">
		<h1 class="title">我的收藏</h1>
	</header>

	<!-- 内容区-->
	<div class="content">
		<!-- 加载更多按钮 -->
	</div>

	<!-- 底部工具栏-->
	<nav class="bar bar-tab">
		<a class="tab-item" href="/page/indexPage">
			<span class="icon icon-home"></span>
			<span class="tab-label">首页</span>
		</a>
		<a class="tab-item" href="/page/addUI">
			<span class="icon icon-plus"></span>
			<span class="tab-label">发布商品</span>
		</a>
		<a class="tab-item active" href="/page/collectUI">
			<span class="icon icon-star-full"></span>
			<span class="tab-label">收藏</span>
		</a>
		<a class="tab-item" href="/page/setting">
			<span class="icon icon-user"></span>
			<span class="tab-label">我的信息</span>
		</a>
	</nav>

	<script type='text/javascript' src='/static/lib/zepto/zepto.min.js' charset='utf-8'></script>
	<script type='text/javascript' src='/static/js/sm.js' charset='utf-8'></script>
	<script type='text/javascript' src='/static/js/sm-extend.js' charset='utf-8'></script>
	<script type='text/javascript' src='/static/js/deatilPage.js' charset='utf-8'></script>
	<script>
		var pn = 1;
		var pageSize = 4;

		$(document).ready(function (){
			collectList();
		});

		//初始化收藏列表
		function collectList() {
			$.ajax({
				url: '/front/collect/list',
				type: 'post',
				dataType: 'json',
				data: {'pn': pn, 'pageSize': pageSize},
				success: function (re) {
                    if (!re.status) {
                        var data = re.data.list;
                        var result = '';
                        for (var i = 0; i < data.length; i++) {
                            result +=
                                "<div class=\"card\" onclick = 'goodDetailPage("+data[i].good_id+")' >\n" +
                                "			<div class=\"card-header\">\n" +
                                "				<div class=\"item-media\" style=\"width: 70%\">\n" +
                                "					<img src=\"" + data[i].img + "\" width=\"44\" height=\"44\"  style=\"border-radius: 5px;margin-right:0.5rem;float: left\">\n" +
                                "					<div class=\"item-title\" >\n" +
                                "						<span style='line-height: 2.2rem;\n" +
                                "    font-size: 1rem;'>" + data[i].username + "</span><br>\n" +
                                "					</div>\n" +
                                "				</div>\n" +
                                "				<div class=\"item-inner\" >\n" +
                                "					<div class=\"item-after\" style=\"float: right\">\n" +
                                "							<span style=\"font-size: 1rem;font-weight: 900;color: red\">\n" +
                                "								￥" + data[i].price + "\n" +
                                "							</span>\n" +
                                "					</div>\n" +
                                "				</div>\n" +
                                "			</div>\n" +
                                "			<div class=\"card-content\">\n" +
                                "				<!-- 商品图片-->\n" +
                                "				<div class=\"row\">\n";
                            var strs = new Array();//定义个数组
                            strs = data[i].good_img.split(',');//分割图片
                            for (var j = 0; j < strs.length; j++) {//遍历显示图片
                                result +=
                                    "<div class=\"col-33\">\n" +
                                    "<img src=\"" + strs[j] + "\" style=\"width: 100%;height: auto\">\n" +
                                    "</div>";
                            }
                            result +=
                                "				</div>\n" +
                                "				<!-- 商品标题-->\n" +
                                "				<div class=\"card-content-inner\" style='padding: 0 .75rem .3rem .75rem;'>" + data[i].name + "</div>\n" +
                                "			</div>\n" +
                                "			<div class=\"card-footer\">\n" +
                                "				<div class=\"\" style=\"width: 100%\">\n" +
                                "					<div class=\"col-25\"></div>\n" +
                                "					<div class=\"col-20 button button-primary pull-right\" onclick=\"collect(this,"+data[i].good_id+")\"><span class=\"icon-star-full\"></span>&nbsp;&nbsp;取消收藏</div>\n" +
                                "				</div>\n" +
                                "			</div>\n" +
                                "		</div>";
                        }
                        $('.content').append(result);
                        pn++;
                        $('.content').append("	<div class=\"loadMoreCollect text-center\" style=\"height: 3.7rem;line-height: .8rem;cursor:pointer\" onclick='loadMoreCollect()'><a>点我加载更多...</a></div>");
                     	if(!re.data.nextPage){
                            // 删除加载提示符
                            $('.infinite-scroll-preloader').remove();
                            $('.loadMoreCollect').remove();
                            //添加已经加载完毕提示符
                            $('.content').append('<div class="tc text-center">已没有更多收藏了</div>')
                        }
                    } else {
                        $.toast(re.msg);
                    }
                }
			});
		}

        //    加载更多
        function loadMoreCollect() {
            $('.loadMoreCollect').hide();
            var tishi = "<div class=\"infinite-scroll-preloader\" style='height: 3.5rem;line-height: .8rem'>\n" +
                "        <div class=\"preloader\"></div>\n" +
                "    </div>"
            $('.content').append(tishi);
            setTimeout(function () {
                collectList();
                $('.infinite-scroll-preloader').remove();
                $('.loadMoreCollect').show();
            },300);
        }

		//收藏

	</script>
	</body>

</html>